Vue.component('comc-color', {
  template:
    `
<div style="display: flex">
  <el-color-picker v-model="color" @change="handleChange" show-alpha></el-color-picker>
</div>
` ,
  props: {
    value: null,
    units: Array
  },
  data() {
    return {
      color: this.value,
    }
  },

  methods: {
    handleChange(value) {
      // this.color = value
      this.fireCom(value)
    },
    getValue(value) {
      return value
    },
    fireCom(value) {
      this.$emit('change', this.getValue( value ))
    }
  },
})

Vue.component('comc-demo', {
  template:
    `
<div>
  <h3>颜色选择</h3>
  <div>{{model}}</div>
  <div>{{parsedModel}}</div>
  <comc-color :value="model.color"
               @change="onFormChange('color', $event)"></comc-color>
</div>
`,
  data() {
    return {
      model: {
        color: 'rgba(255, 0, 0, 1)'
      },
      parsedModel: {}
    }
  },
  methods: {
    onFormChange(key, e) {
      // console.log(key, e)
      this.$nextTick(() => {
        this.$set(this.parsedModel, key, e)
      })
    }
  },
})
